<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "likeItem",
});
</script>
<script setup lang="ts">
import { reactive, ref, withDefaults, toRefs, inject } from "vue";
import { Router } from "@/utils/router";
import love1 from "@/package/famous-talk/static/love1.png";
import love2 from "@/package/famous-talk/static/love2.png";
import Comment2 from "./comment2.vue";
import { user_comment_like } from "../../api/guider";
const config: any = inject("likeConfig");
const emit = defineEmits(["love"]);
type dataType = {
  id: number;
  like_count: number;
  is_like: number;
};
const props = defineProps<dataType>();
const isLove = ref(false);

const loveClick = () => {
  config.istoLogin(oprate);
};
const oprate = () => {
  user_comment_like({
    id: props.id,
  }).then(() => {
    emit("love");
  });
};
</script>

<template>
  <view class="love">
    <image
      :src="is_like ? love1 : love2"
      mode="scaleToFill"
      @click="loveClick"
    />
    <view class="loveWord" v-if="like_count!=0" > {{like_count}} </view>
  </view>
</template>

<style lang="scss">
.love {
  width: 36rpx;
  // height: 36rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  image {
    width: 36rpx;
    height: 36rpx;
  }
  .loveWord {
    opacity: 0.66;
    font-size: 18rpx;
    color: #666666;
    line-height: 26rpx;
  }
}
</style>
